<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.1.1.js"></script>
		<title>练习</title>
		<style type="text/css">
			ul,
			li {
				padding: 0;
				margin: 0;
			}
			
			ul {
				list-style: none;
			}
			
			#content {
				width: 300px;
				height: 300px;
				margin: 200px auto;
				position: relative;
			}
			
			#box {
				width: 300px;
				height: 300px;
				background-color: indianred;
				
			}
			
			.part {
				width: 150px;
				height: 150px;
				background-color: indianred;
				position: absolute;
				display: none;
			}
			.center{
				width: 100px;
				height: 100px;
				border-radius: 50px;
				background-color: indianred;
				position: absolute;
				top: 100px;
				left: 100px;
				opacity: 0;
			}
			#one{
				top: 0;
				left: 0;
			}
			#two{
				top: 0;
				right: 0;
			}
			#three{
				bottom: 0;
				left: 0;
			}
			#four{
				bottom: 0;
				right: 0;
			}
		</style>
	</head>

	<body>
		<div id="content">
			<ul>
				<li>
					<div id="box"></div>
					<div id="one" class="part"></div>
					<div id="two" class="part"></div>
					<div id="three" class="part"></div>
					<div id="four" class="part"></div>
					<div id="fiv" class="center">
						
					</div>
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			$('#content').hover(function() {
				$('#box').css('display','none')
				$('.part').css('display','block')
				$('#one').stop().animate({top:'-150px','border-radius':'50px',width:'100px',height:'100px'},1000)
				$('#two').stop().animate({right:'-150px','border-radius':'50px',width:'100px',height:'100px'},1000)
				$('#three').stop().animate({left:'-150px','border-radius':'50px',width:'100px',height:'100px'},1000)
				$('#four').stop().animate({bottom:'-150px','border-radius':'50px',width:'100px',height:'100px'},1000)
				$('.center').stop().animate({opacity:1},3000)
				$('.center').click(function(){
					$('#one').stop().animate({top:'300px'},1000);
					$('#two').stop().animate({right:'300px'},1000);
					$('#three').stop().animate({left:'300px'},1000);
					$('#four').stop().animate({bottom:'300px'},1000);
				})
			},function(){
				$('#one').stop().animate({top:'150px','border-radius':'0',width:'150px',height:'150px'},1000)
				$('#two').stop().animate({right:'150px','border-radius':'0',width:'150px',height:'150px'},1000)
				$('#three').stop().animate({left:'150px','border-radius':'0',width:'150px',height:'150px'},1000)
				$('#four').stop().animate({bottom:'150px','border-radius':'0',width:'150px',height:'150px'},1000)
				$('.center').stop().animate({opacity:0},1)
			})
		</script>
	</body>

</html>